<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>

		<style>
			body {
				margin: 0px;
			}

			.el-header {
				border-bottom: 1px solid silver;
			}

			.el-aside {

				position: absolute;
				bottom: 0px;
				top: 60px;
				border-right: 1px solid silver;

			}

			.el-main {

				position: absolute;
				left: 200px;
				bottom: 0px;
				right: 0px;
				top: 60px;
				padding: 0px;
			}
		</style>

	</head>
	<body>

		<div id="app">

			<el-container>
				<el-header>Header</el-header>
				<el-container>

					<el-aside width="200px">

						<el-input size="mini" placeholder="输入关键字进行过滤" v-model="filterText">
						</el-input>

						<el-tree @node-click="handleNodeClick" class="filter-tree" :data="treedata"
							:props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree">
						</el-tree>


					</el-aside>
					<el-main>

						<iframe :src="href" style="width: 100%;height: 99%;border: none;"></iframe>

					</el-main>
				</el-container>
			</el-container>
		</div>

		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					filterText: '',
					href:'',
					treedata: [{
						id: 1,
						label: '系统维护',
						children: [{
							id: 4,
							label: '资源权限',
							href:'permis.html'
						},{
							id: 33,
							label: '角色维护',
							href:'role.html'
						}]
					}, {
						id: 2,
						label: '一级 2',
						children: [{
							id: 5,
							label: '二级 2-1'
						}, {
							id: 6,
							label: '二级 2-2'
						}]
					}],
					defaultProps: {
						children: 'children',
						label: 'label'
					}
				},
				watch: {
					filterText(val) {
						this.$refs.tree.filter(val);
					}
				},
				methods: {
					filterNode(value, data) {
						if (!value) return true;
						return data.label.indexOf(value) !== -1;
					},
					handleNodeClick(data) {
						if(data.href!=undefined){
							this.href=data.href;
						}
						
					}
				}

			})
		</script>

	</body>
</html>